<template>
	<view>
		<page-head :title="'我的学车'" :headtype="2"></page-head>
		<block v-for="(item,index) in datas" :key="index">
			<view class="cardeach marginAuto">
				<image class="cardeachbg" :src="apifun.serveimg+'mystudybg.png'" mode=""></image>
				<view class="cardeachq mainBg baiColor" v-if="item.pay_type == 2">先学后付</view>
				<view class="cardeachmain">
					<view class="cardeachname flex">
						<text>{{ item.school_name }}</text>
						<text style="font-weight:normal;">{{ item.status_txt }}</text>
					</view>
					<view class="cardeachb flex">
						<view class="cardeachbimg">
							<image :src="apifun.URLimg+item.school_img" mode=""></image>
						</view>
						<view class="cardeachbmsg">
							<view class="cardeachbmsg-name ellipsis01">{{ item.course_name }}</view>
							<view class="cardeachbmsg-jl flex">
								<!-- <uv-icon name="map" color="#1686F8" size="16"></uv-icon> -->
								<!-- <view class="jl-num mainColor" style="margin:0 10rpx;">0.5km</view> -->
								<view class="jl-txt" style="color:#666666;">郑州市 金水区</view>
							</view>
							<view class="cardeachbmsg-money" v-if="item.price">
								<text style="font-size: 20rpx;color:#FC2A2A;">￥</text>
								<text style="font-size:36rpx;color:#FC2A2A;">{{ item.price }}</text>
								<!-- <text style="font-size:24rpx;color:#666666;margin-left:20rpx;">￥{{ item.old_price }}</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="btn flex">
					<view class="eachbtn mainBg baiColor" v-if="item.status == 3 && item.source_id == 0" @click="enterend(item,index)">确认完成</view>
					<view class="eachbtn mainBg baiColor" v-if="item.status == 3 && item.source_id != 0" @click="acitem=item;acindex=index;$refs.uploadcode.open()">上传券码</view>
				</view>
			</view>
		</block>
		<uv-popup ref="uploadcode" mode="center" round="20" @close="$refs.uploadcode.close()">
			<view class="popup" style="height:auto;padding: 20rpx 0;">
				<view class="eachphoto marginAuto" @click="uploadfile()">
					<image class="eachphotoimg" :src="apifun.URLimg+upcodeurl" mode="aspectFill"></image>
					<view class="eachphotoicon marginAuto"><uv-icon name="photo" size="40" color="#999999"></uv-icon></view>
					<view class="eachphototitle">添加照片</view>
				</view>
				<view class="popup-content">
					<input type="text" placeholder="请填写券码" v-model="qcode" />
				</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="$refs.uploadcode.close()">取消</view>
					<view class="btns btn2" @click="enterupload">上传券码</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				datas:[],
				acitem:{},
				acindex:'',
				upcodeurl:''
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			enterupload(){
				let sendData = {
					order_id:this.acitem.id,
					code:this.qcode,
					img:this.upcodeurl
				}
				this.apifun.unirequest('/api/study/uploadCode','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.$refs.uploadcode.close();
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			enterend(item,index){
				let sendData = {
					id:item.id
				};
				this.apifun.unirequest('/api/study/completeOrder','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			
			initData(){
				this.apifun.unirequest('/api/study/getMyStudyOrder','post',{},(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			uploadfile(){
				this.apifun.uploadFileimg((res)=>{
					if(res.code == 200){
						this.upcodeurl=res.data.src
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	page{
		background: #F7F7F7;
	}
	.cardeach{
		position: relative;
		padding: 30rpx;
		width: 630rpx;
		background: #fff;
		margin-top: 20rpx;
		border-radius:20px;
		.cardeachbg{
			position:absolute;
			top: 0;
			left: 0;
			width:100%;
			height: 100%;
			z-index: 0;
			border-radius:20px;
		}
		.cardeachq{
			position: absolute;
			top:0rpx;
			right:0rpx;
			padding:0 10rpx;
			line-height:50rpx;
			font-size:20rpx; 
			border-top-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
		}
		.cardeachmain{
			position: relative;
			z-index: 10;
			.cardeachname{
				color: #222222;
				font-size: 32rpx;
				line-height: 60rpx;
				font-weight: 600;
				justify-content: space-between;
			}
			.cardeachb{
				margin-top: 20rpx;
				.cardeachbimg{
					width: 180rpx;
					height: 180rpx;
					image{
						width: 180rpx;
						height: 180rpx;
						border-radius:10rpx;
					}
				}
				.cardeachbmsg{
					margin-left: 20rpx;
					.cardeachbmsg-name{
						color: #333333;
						font-size: 28rpx;
						margin-top:20rpx;
					}
					.cardeachbmsg-jl{
						padding: 14rpx 0;
						font-size: 24rpx;
						line-height:40rpx;
					}
					.cardeachbmsg-money{
						line-height: 50rpx;
					}
				}
			}
		}
		.btn{
			position: relative;
			z-index: 10;
			width: 100%;
			justify-content:flex-end;
			.eachbtn{
				display: inline-block;
				padding: 0 30rpx;
				line-height:60rpx;
				margin-left: 20rpx;
				border-radius:10rpx;
				font-size: 26rpx;
			}
		}
	}
	.subjecton{
		width: 630rpx;
		padding: 28rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.popup {
		width: 600rpx;
		height: 416rpx;
		text-align: center;
	
		.popup-content {
			border: 1px solid #eee;
			margin: 30rpx auto 0;
			width: 510rpx;
			height:80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			background: #FFFFFF;
			padding: 0rpx 16rpx;
			box-sizing: border-box;
			input{
				height:80rpx;
				line-height: 80rpx;
			}
		}
	
		.popup-btn {
			padding-top:30rpx;
			justify-content: space-evenly;
	
			.btns {
				width: 240rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
	
			.btn1 {
				color: #1686F8;
				border: 1rpx solid #1686F8;
			}
	
			.btn2 {
				background: #0E71EB;
				color: #FFFFFF;
			}
		}
	}
	.eachphoto{
		position: relative;
		width: 300rpx;
		height:300rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		border: 1px solid #BCBCBC;
		.eachphotoimg{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 300rpx;
			height:300rpx;
			border-radius: 10rpx;
		}
		.eachphotodel{
			position: absolute;
			right:-20rpx;
			top:-20rpx;
			z-index: 10;
		}
		.eachphotoicon{
			width: 70rpx;
			height: 70rpx;
			margin-top: 90rpx;
		}
		.eachphototitle{
			font-size: 24rpx;
			color:#9E9E9E;
			line-height:50rpx;
			text-align: center;
		}
	}
</style>